<!DOCTYPE html>
<html>

<head>
    <title>{$theme_vars.plate_name|default=''} {$site_info.site_name|default=''}</title>
    <meta name="keywords" content="{$site_info.site_seo_keywords|default=''}" />
    <meta name="description" content="{$site_info.site_seo_description|default=''}">
    <include file="public@head" />
    <link href="__TMPL__/public/assets/css/slippry/slippry.css" rel="stylesheet">
    <style>
        .caption-wraper {
            position: absolute;
            left: 50%;
            bottom: 2em;
        }

        .caption .caption-wraper a img {
            height: 1092px;
        }

        .caption-wraper .caption {
            display: none;
        }
    </style>
    <widgetsHead />
    <hook name="before_head_end" />
</head>

<body class="body-white">
    <include file="public@nav" />
    <div id="pageHeader">
        <h1> {$theme_vars.plate_name|default='展会新闻'}</h1>
    </div>
    <div id="pageContent">
        <portal:articles limit="3" order="id" categoryIds="2" page="10">
            <a class="newsBoxa" title="{$vo.post_title}"
                href="{:cmf_url('portal/Article/index',array('id'=>$vo['id']))}">
                <div class="newsBox" onclick='chick(`{$vo}`)''>
                    <img style="width:100%;height: 17vh;" src="http://{$theme_vars.https}/upload/{$vo.thumbnail}" alt="">
                    <div style="padding: 0.9vw;">  
                        <p class="title">{$vo.post_title}</p>
                        <p class="content">{$vo.post_excerpt}</p>
                        <p class="more">阅读更多 »</p>   
                    </div>    
                </div>
            </a>
        </portal:articles>
    </div>
    <ul class="pagination">
        <page />
    </ul>
    <include file="public@footer" />
    <include file="public@scripts" />
    <widgetsScript />
    <hook name="before_body_end" />
</body>

</html>
<style>
    #pageHeader {
        margin-top: 30px;
        width: 100%;
        height: 200px;
        background-color: black;
        color: white;
        display: flex;
        align-items: center;

    }

    #pageHeader h1 {
        font-weight: 600;
        margin-left: 20%;
    }

    #pageContent {
        display: flex;
        padding: 0 10%;
    }


    #pageContent .newsBox {
        width: 15vw;
        height: 30vh;
        margin: 50px;
        box-shadow: 0 0 10px 0 rgb(0 0 0 / 15%);
        transition-property: box-shadow;
        transition-duration: 0.5s;
    }
    #pageContent .newsBoxa{   
        text-decoration: none; /* 取消默认的下划线 */
        color: #333;
    }
    #pageContent .newsBoxa:focus {
        outline:none;  
        -moz-outline:none;
    }
    #pageContent .newsBoxa:hover{   
        text-decoration: none; /* 取消默认的下划线 */
    }
    #pageContent .newsBox .more {
        font-size: 12px;
        font-weight: 700;
    }

    #pageContent .newsBox .content {
        margin: 2vh 0;
        font-size: .875rem !important;
        color: #777;
    }

    #pageContent .newsBox:hover {
        margin-left: 50px;
        
        box-shadow: 0 0 10px 0 rgb(0 0 0 / 30%);
    }
</style>